
import React, {useEffect, useRef, useState} from 'react';

import './Poster.css'

export function getImageUrl(imageId: string): string {
	// window.webUrl_imageServer = 'http://10.21.64.23:8085'; // 图片服务
	// return `${global.webUrl_imageServer}/image/0.0.80.10.0/${imageId}.jpg`;
	return `https://img.tradechina.com/image/0.0.80.10.0/${imageId}.jpg`;
}

type DrawRatioImageProps = {
	xProp?: number;
	yProp?: number;
	context: any;
	url: string;
	container_width: number;
	container_height: number;
	type: 'cover' | 'contain';
};

type GetObjectFitSizeProps = {
	type: 'cover' | 'contain';
	containerWidth: number; // 目标容器宽度
	containerHeight: number; // 目标容器高度
	imgWidth: number; // 原图宽度
	imgHeight: number; // 原图高度
};

type GrawCompanyNameProps = {
	context: any;
	fontSize: number;
	lineNum?: number;
	maxWidth: number;
	x: number;
	text: string;
	fontWeight: number;
	color?: string;
	isCountY?: boolean;
	isCenter?: boolean;
	lineHeightProp?: number;
};

export async function loadImage(src: string): Promise<HTMLImageElement> {
	const image = new Image()
	return new Promise((resolve, reject) => {
		image.onload = () => resolve(image);
		image.onerror = () => (image.src = 'https://imagecdn.tradechina.com/b1c4180bf8360444fde8780_png.png');
		image.setAttribute('crossOrigin', 'Anonymous');
		image.src = src || 'https://imagecdn.tradechina.com/b1c4180bf8360444fde8780_png.png';
	});
}
const CANVAS_WIDTH = 750; // 画布宽度
const CANVAS_HEIGHT = 1623; // 画布高度
const SUPPLIER_LOGO_WIDTH = 160; // 供应商公司logo宽度
const SUPPLIER_LOGO_HEIGHT = 160; // 供应商公司logo高度
const GRADETYPE_WIDTH = 252;
const GRADETYPE_HEIGHT = 52;
const QRCODE_WIDTH = 120; // 二维码图片宽度
const QRCODE_HEIGHT = 120; // 二维码图片高度
const PADDING_WIDTH = 20;
const PADDING_HEIGHT = 20;
const LINE_HEIGHT = 56;
const TEXT_LINE = 10;
const PRODUCT_PICTURE_WIDTH = 158; //产品图片宽度
const PRODUCT_PICTURE_HEIGHT = 158; //产品图片宽度

const getObjectFitSize = (props: GetObjectFitSizeProps) => {
	const {type = 'contain', containerWidth, containerHeight, imgWidth, imgHeight} = props;
	let radio = 1,
		sx = 0,
		sy = 0,
		sWidth = imgWidth,
		sHeight = imgHeight,
		dWidth = containerWidth,
		dHeight = containerHeight;
	let dWHRatio = containerWidth / containerHeight;
	let sWHRatio = imgWidth / imgHeight;
	if (type === 'contain') {
		if (sWHRatio <= dWHRatio) {
			// 横图宽先匹配,高度自适应
			sHeight = dHeight;
			sWidth = sWHRatio * dHeight;
			sy = 0;
			sx = (dWidth - sWidth) / 2;
		} else {
			// 竖图，高先匹配，宽度自适应
			sWidth = dWidth;
			sHeight = sWidth / sWHRatio;
			sx = 0;
			sy = (dHeight - sHeight) / 2;
		}
	} else if (type === 'cover') {
		if (sWHRatio > dWHRatio) {
			// 横图宽先匹配，高度自适应
			sWidth = dWidth;
			sHeight = (imgHeight / imgWidth) * dWidth;
			sx = 0;
			sy = (dHeight - sHeight) / 2;
		} else {
			// 竖图，高先匹配，宽度自适应
			sHeight = dHeight;
			sWidth = sWHRatio * dHeight;
			sy = 0;
			sx = (dWidth - sWidth) / 2;
		}
	}
	return {sx, sy, sWidth, sHeight};
};

const Poster: React.FunctionComponent = props => {
	let baseY = 0;
	let baseX = 0;
	const [posterImgUrl, setPosterImgUrl] = useState<any>();
	const [supplierInfo, setSupplierInfo] = useState(null);
	const [loading, setLoading] = useState(true);
	const canvasRef1 = useRef(null);
	const canvasRef2 = useRef(null);
	const downloadBadge = (file, name) => {
		const a = document.createElement('a');
		a.href = file;
		a.download = name;
		window.MouseEvent ? a.dispatchEvent(new MouseEvent('click')) : a.click();
		// window.gio && window.gio('track', 'btn_Invitation_poster_download', {Server_time: formatDate(Date.now(), 'yyyy-MM-dd hh:mm'), Supplier_name: supplierInfo?.supplierDto?.adName, supplier_code: supplierInfo?.supplierDto?.code});
	};
	// 两行文本超出省略的高度
	const drawTextLineNo = async (props: GrawCompanyNameProps) => {
		const {context, maxWidth, text, lineHeightProp, fontWeight, fontSize} = props;
		let totalLines = 0;
		context.font = `${fontWeight} ${fontSize}px sans-serif`;
		const width = context.measureText(text.trim()).width;
		totalLines = Math.ceil(width / maxWidth);
		// 这里不对
		if (totalLines < 2) {
			totalLines = 1;
		} else {
			totalLines = 2;
		}
		return totalLines;
	};

	// 绘制多行文本的高度
	const drawMoreRowLineNo = async (props: GrawCompanyNameProps) => {
		const {context, fontSize, fontWeight, maxWidth, x, text, color, isCountY, isCenter, lineHeightProp} = props;
		context.font = `${fontWeight} ${fontSize}px sans-serif`;
		let totalLine = 0;
		const width = context.measureText(text).width;
		totalLine = Math.ceil(width / maxWidth);
		return totalLine;
	};

	// 绘制图片
	const drawRatioImage = async (props: DrawRatioImageProps) => {
		const {context, url, container_width, container_height, xProp, yProp, type = 'contain'} = props;
		// 加载图片
		const img = await loadImage(url);
		console.log(`img=`, img);
		const {width, height} = img;
		// 获取图片宽高
		const {sx, sy, sWidth, sHeight} = getObjectFitSize({type: type, containerWidth: container_width, containerHeight: container_height, imgWidth: width, imgHeight: height});
		if (type == 'contain') {
			let x = xProp || PADDING_WIDTH * 2;
			let y = baseY;
			context.drawImage(img, x, y, sWidth, sHeight);
		} else if (type == 'cover') {
			context.fillStyle = '#fff';
			context.fillRect(xProp, baseY, container_width, container_height);
			let x = xProp + sx;
			let y = yProp + sy;
			context.drawImage(img, x, y, sWidth, sHeight);
		}
	};
	// 绘制两行文本，超出省略
	const drawText = async (props: GrawCompanyNameProps) => {
		const {context, fontSize, fontWeight, lineNum, maxWidth, x, text, color, isCountY, isCenter, lineHeightProp} = props;
		context.fillStyle = color || '#0A1833';
		isCenter && (context.textAlign = 'center');
		context.font = `${fontWeight} ${fontSize}px sans-serif`;
		const words = text?.trim()?.split(/\s/);
		const lineHeight = lineHeightProp || LINE_HEIGHT;
		let countY = baseY;
		let currentLine = '';
		let totalLines = 0;
		for (let i = 0; i < words?.length; i++) {
			const testLine = currentLine + words[i] + ' ';
			const testLineWidth = context.measureText(testLine).width;
			if (testLineWidth > maxWidth && i > 0) {
				totalLines++;
				if (totalLines >= 2) {
					// Add ellipsis to the end of the last drawn line
					const ellipsisWidth = context.measureText('...').width;
					const trimWidth = maxWidth - ellipsisWidth;
					let trimmedText = currentLine.trim();
					while (context.measureText(trimmedText).width > trimWidth && trimmedText?.length > 0) {
						trimmedText = trimmedText?.slice(0, -1);
					}

					context.fillText(trimmedText + '...', x, isCountY ? countY : baseY);
					isCountY ? (countY += lineHeight) : (baseY += lineHeight);
					break;
				}

				context.fillText(currentLine.trim(), x, isCountY ? countY : baseY, maxWidth);
				isCountY ? (countY += lineHeight) : (baseY += lineHeight);
				currentLine = words[i] + ' ';
			} else {
				currentLine = testLine;
			}
		}

		// Draw the last line if less than two lines
		if (totalLines < 2) {
			context.fillText(currentLine.trim(), x, isCountY ? countY : baseY, maxWidth);
			isCountY ? (countY += lineHeight) : (baseY += lineHeight);
		}
	};

	//绘制多行文本
	const drawMoreRow = async (props: GrawCompanyNameProps) => {
		const {context, fontSize, fontWeight, maxWidth, x, text, color, isCountY, isCenter, lineHeightProp} = props;
		isCenter && (context.textAlign = 'center');
		context.fillStyle = color || '#0A1833';
		context.font = `${fontWeight} ${fontSize}px sans-serif`;
		let countY = baseY;
		let index = 0;
		let totalLine = 0;
		eachFun(index);
		function eachFun(index) {
			let lineHeight = lineHeightProp || LINE_HEIGHT;
			for (var i = index; i < text?.length; i++) {
				if (context.measureText(text.substring(index, i + 1)).width >= maxWidth) {
					context.fillText(text.substring(index, i), x, isCountY ? countY : baseY);
					isCountY ? (countY += lineHeight) : (baseY += lineHeight);
					index = i;
					totalLine++;
				}
			}
			if (index < text?.length) {
				context.fillText(text.substring(index, text?.length), x, isCountY ? countY : baseY);
				isCountY ? (countY += lineHeight) : (baseY += lineHeight);
				totalLine++;
			}
		}
	};
	// 绘制多行文本单个单词换行
	const drawMoreRowWrap = async (props: GrawCompanyNameProps) => {
		const {context, fontSize, fontWeight, maxWidth, x, text, color, isCountY, isCenter, lineHeightProp} = props;
		isCenter && (context.textAlign = 'center');
		const words = text?.trim()?.split(/\s/);
		context.fillStyle = color || '#0A1833';
		context.font = `${fontWeight} ${fontSize}px sans-serif`;
		let countY = baseY;
		let index = 0;
		let currentLine = '';
		eachFun(index);
		function eachFun(index) {
			let lineHeight = lineHeightProp || LINE_HEIGHT;
			for (var i = index; i < words?.length; i++) {
				const testLine = currentLine + words[i] + ' ';
				const testLineWidth = context.measureText(testLine).width;
				if (testLineWidth >= maxWidth) {
					context.fillText(currentLine, x, isCountY ? countY : baseY);
					isCountY ? (countY += lineHeight) : (baseY += lineHeight);
					currentLine = words[i] + ' ';
				} else {
					currentLine = testLine;
				}
				context.fillText(currentLine, x, isCountY ? countY : baseY);
			}
			isCountY ? (countY += lineHeight) : (baseY += lineHeight);
		}
	};
	const getPosterImageFileNew = async () => {

		let canvas = document.createElement('canvas');
		canvas.width = CANVAS_WIDTH;
		canvas.height = CANVAS_HEIGHT;
		const context: CanvasRenderingContext2D = canvas.getContext('2d');
		// 没有背景图的话也要设置一个背景为白色，宽高为要求宽高的矩形
		context.fillStyle = '#fff';
		context.fillRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);
		// 如果有背景图，绘制并自适应宽高
		if (supplierInfo?.postUrl) {
			const img = await loadImage(supplierInfo?.postUrl);
			const {width, height} = img;
			const newHeight = Math.ceil((height / width) * CANVAS_WIDTH);
			context.drawImage(img, 0, 0, CANVAS_WIDTH, newHeight > 1200 ? 1200 : newHeight);
		}
		baseX = PADDING_WIDTH * 2;
		console.log(`wqqw=`, "dqdqw");

		// 绘制公司logo
		await drawRatioImage({context: context, url: supplierInfo?.supplierDto?.logo ? getImageUrl(supplierInfo?.supplierDto?.logo) : '', container_width: SUPPLIER_LOGO_WIDTH, container_height: SUPPLIER_LOGO_HEIGHT, type: 'contain'});
		console.log(`wqqw=`, "dqdqw");

		// 加上图片高度和间距
		baseY += SUPPLIER_LOGO_HEIGHT + PADDING_HEIGHT * 6;
		// await drawText({text: supplierInfo?.supplierDto?.adName, fontWeight: 600, context: context, fontSize: 56, lineNum: 2, maxWidth: 670, x: baseX});
		//绘制公司名称
		await drawMoreRowWrap({text: supplierInfo?.supplierDto?.adName, fontWeight: 600, context: context, fontSize: 48, maxWidth: 670, x: baseX, lineHeightProp: 60});
		// 字体已经加上，加上间距
		baseY += TEXT_LINE;

		// 绘制会员类型
		context.drawImage(await loadImage('https://imagecdn.tradechina.com/b1c4180bf8360444fde8780_png.png'), baseX, baseY - GRADETYPE_HEIGHT, GRADETYPE_WIDTH, GRADETYPE_HEIGHT);
		baseY += GRADETYPE_HEIGHT + TEXT_LINE * 3;
		await drawText({text: 'INVITATION', fontWeight: 800, context: context, fontSize: 84, lineNum: 2, maxWidth: 670, x: baseX, lineHeightProp: 60});
		if (supplierInfo?.standNos?.length > 0) {
			await drawMoreRow({text: 'Booth No', fontWeight: 600, context: context, fontSize: 48, lineNum: 2, maxWidth: 670, x: baseX, lineHeightProp: 40});
			baseY += TEXT_LINE * 2;
			//绘制摊位号
			// let arr = ['G845424', 'G945517', 'G956686', 'G845424', 'G945517', 'G956686', 'G845424', 'G945517', 'G956686', 'G845424', 'G945517', 'G956686'];
			// let arr = supplierInfo?.standNos?.split(',');
			let str = supplierInfo?.standNos?.join('、');
			await drawMoreRow({text: str, fontWeight: 600, context: context, fontSize: 48, lineNum: 2, maxWidth: 670, x: PADDING_WIDTH * 2, lineHeightProp: 48});
		}

		function drawVerticalGradientRect(ctx, x, y, width, height, borderRadius, topColor, bottomColor) {
			const gradient = ctx.createLinearGradient(x, y, x, y + height);
			gradient.addColorStop(0, topColor);
			gradient.addColorStop(1, bottomColor);

			// 绘制填充
			ctx.fillStyle = gradient;
			ctx.beginPath();
			ctx.moveTo(x + borderRadius, y);
			ctx.arcTo(x + width, y, x + width, y + height, borderRadius);
			ctx.arcTo(x + width, y + height, x, y + height, borderRadius);
			ctx.arcTo(x, y + height, x, y, borderRadius);
			ctx.arcTo(x, y, x + width, y, borderRadius);
			ctx.closePath();
			ctx.fill();

			ctx.globalAlpha = 1;
		}

		// Location
		const address = `${supplierInfo?.cityName} ${supplierInfo?.cityName && ', '}${supplierInfo?.countryName}`;
		//绘制渐变背景
		function drawRoundedGradientRect(ctx, x, y, width, height, borderRadius, gradientColors, opacity, borderColor) {
			const gradient = ctx.createLinearGradient(x, y, x, y + height);
			for (let i = 0; i < gradientColors.length; i++) {
				gradient.addColorStop(i / (gradientColors.length - 1), gradientColors[i]);
			}

			// 绘制填充
			ctx.globalAlpha = opacity;
			ctx.fillStyle = gradient;
			ctx.beginPath();
			ctx.moveTo(x + borderRadius, y);
			ctx.arcTo(x + width, y, x + width, y + height, borderRadius);
			ctx.arcTo(x + width, y + height, x, y + height, borderRadius);
			ctx.arcTo(x, y + height, x, y, borderRadius);
			ctx.arcTo(x, y, x + width, y, borderRadius);
			ctx.closePath();
			ctx.fill();
			ctx.globalAlpha = 1; // 恢复全局透明度

			// 绘制边框
			ctx.strokeStyle = borderColor;
			ctx.lineWidth = 1;
			ctx.stroke();
		}

		const VenueHeight = await drawMoreRowLineNo({text: supplierInfo?.location, fontWeight: 400, context: context, fontSize: 24, lineNum: 2, maxWidth: 320, x: baseX, lineHeightProp: 28});

		const LocationHeight = await drawTextLineNo({text: address, fontWeight: 400, color: '#0A1833', context: context, fontSize: 24, maxWidth: 290, x: baseX, lineHeightProp: 28});
		const AllHeight = VenueHeight + LocationHeight - 2;
		drawVerticalGradientRect(context, 0, 920 + (3 - AllHeight) * 28, 750, 300, 20, 'rgba(255, 255, 255, 0)', 'rgba(255, 255, 255, 1)');
		console.log(`wqqw=`, "dqdqw");

		// 绘制产品图片
		baseY = 1000 + (3 - AllHeight) * 28;
		const productImage = supplierInfo?.spuDtos?.map(item => item?.mainImageId);
		for (let i = 0; i < productImage?.length; i++) {
			let imageId = productImage?.[i];
			let spacing = 10;
			// 计算每张图片的宽度
			let imageWidth = 160;
			// 计算绘制图片的盒子位置
			let boxX = CANVAS_WIDTH - 10 - (imageWidth + spacing) * productImage?.length;
			let x = boxX + i * (imageWidth + spacing);

			await drawRatioImage({xProp: x, yProp: baseY, context: context, url: imageId ? getImageUrl(imageId) : '', container_width: PRODUCT_PICTURE_WIDTH, container_height: PRODUCT_PICTURE_HEIGHT, type: 'cover'});
			await drawRoundBorder(context, x - 1, baseY - 1, PRODUCT_PICTURE_WIDTH + 2, PRODUCT_PICTURE_HEIGHT + 2, 5, '#fff');
		}
		// 绘制圆角边框的长度
		function drawRoundBorder(ctx, x, y, width, height, borderRadius, borderColor) {
			// 绘制填充
			// ctx.fillStyle = 'fff';
			ctx.beginPath();
			ctx.moveTo(x + borderRadius, y);
			ctx.arcTo(x + width, y, x + width, y + height, borderRadius);
			ctx.arcTo(x + width, y + height, x, y + height, borderRadius);
			ctx.arcTo(x, y + height, x, y, borderRadius);
			ctx.arcTo(x, y, x + width, y, borderRadius);
			ctx.closePath();
			ctx.stroke();

			// 绘制边框
			ctx.strokeStyle = borderColor;
			ctx.lineWidth = 2;
			ctx.stroke();
		}
		// 绘制渐变背景
		drawRoundedGradientRect(context, 20, 1177 + (3 - AllHeight) * 28, 710, 356 + AllHeight * 28, 20, ['#EDEFF5', '#ffffff'], 1, '#dfe1e6');
		// 格式化日期函数
		function formatDate(dateString) {
			return `${dateString.slice(0, 4)}.${dateString.slice(4, 6)}.${dateString.slice(6)}`;
		}
		// 格式化日期函数
		function formatDateLast(dateString) {
			return `${dateString.slice(4, 6)}.${dateString.slice(6)}`;
		}
		const formattedStartDate = formatDate(supplierInfo?.inshowStartDate);
		const formattedEndDate = formatDateLast(supplierInfo?.inshowEndDate);
		// 拼接成最终形式
		const data = `${formattedStartDate}-${formattedEndDate}`;
		console.log(`wqqw=`, "dqdqw");

		// 绘制展会信息
		baseY = 1225 + (3 - AllHeight) * 28;
		await drawText({text: supplierInfo?.exhibitionName, fontWeight: 600, color: '#0A1833', context: context, fontSize: 28, lineNum: 1, maxWidth: 670, x: baseX, lineHeightProp: 32});
		baseY += TEXT_LINE * 2;
		if (supplierInfo?.inshowStartDate || supplierInfo?.inshowEndDate) {
			await drawText({text: 'Date', fontWeight: 600, color: '#0A1833', context: context, fontSize: 24, lineNum: 1, maxWidth: 670, x: baseX, lineHeightProp: 28});
			baseY += TEXT_LINE;
			await drawText({text: data, fontWeight: 400, color: '#0A1833', context: context, fontSize: 24, lineNum: 1, maxWidth: 670, x: baseX, lineHeightProp: 28});
			baseY += TEXT_LINE * 2;
		}
		if (supplierInfo?.location) {
			await drawText({text: 'Venue', fontWeight: 600, color: '#0A1833', context: context, fontSize: 24, lineNum: 1, maxWidth: 670, x: baseX, lineHeightProp: 28});
			baseY += TEXT_LINE;
			// await drawText({text: supplierInfo?.location, fontWeight: 400, color: '#0A1833', context: context, fontSize: 24, lineNum: 1, maxWidth: 320, x: baseX, lineHeightProp: 28});
			await drawMoreRow({text: supplierInfo?.location, fontWeight: 400, context: context, fontSize: 24, lineNum: 2, maxWidth: 320, x: baseX, lineHeightProp: 28});
			baseY += TEXT_LINE * 2;
		}

		if (supplierInfo?.cityName || supplierInfo?.countryName) {
			await drawText({text: 'Location', fontWeight: 600, color: '#0A1833', context: context, fontSize: 24, lineNum: 1, maxWidth: 670, x: baseX, lineHeightProp: 28});
			baseY += TEXT_LINE;
			await drawText({text: address, fontWeight: 400, color: '#0A1833', context: context, fontSize: 24, lineNum: 1, maxWidth: 290, x: baseX, lineHeightProp: 28});
		}

		// 绘制二维码
		const exhibition_status_结束 = supplierInfo.exhibitionState === 5 || supplierInfo.exhibitionState === 4;
		// 判断展会是否结束
		const draw_qrcode_x = exhibition_status_结束 ? 550 : 376;
		const draw_qrText_x = exhibition_status_结束 ? 610 : 436;
		// const draw_qrText_x = exhibition_status_结束 ? 546 + QRCODE_WIDTH / 2 : QRCODE_WIDTH / 2 + 145 / 2;
		baseY = 1412;
		context.drawImage(canvasRef1.current, draw_qrcode_x, baseY, QRCODE_WIDTH, QRCODE_HEIGHT);
		baseY += QRCODE_HEIGHT + PADDING_HEIGHT + 2;
		await drawMoreRow({text: 'Scan the QR code for more products', fontWeight: 400, color: '#0A1833', context: context, fontSize: 20, lineNum: 2, maxWidth: 180, x: draw_qrText_x, isCenter: true, lineHeightProp: 24});

		if (!exhibition_status_结束) {
			baseY = 1412;
			context.drawImage(canvasRef2.current, 577, baseY, QRCODE_WIDTH, QRCODE_HEIGHT);
			baseY += QRCODE_HEIGHT + PADDING_HEIGHT + 2;
			await drawMoreRow({text: 'Scan the QR code for free ticket', fontWeight: 400, color: '#0A1833', context: context, fontSize: 20, lineNum: 2, maxWidth: 180, x: 637, lineHeightProp: 24, isCenter: true});
		}

		const output = document.createElement('canvas');
		output.width = CANVAS_WIDTH;
		output.height = CANVAS_HEIGHT;
		output.getContext('2d').drawImage(canvas, 0, 0);
		return output.toDataURL('image/png', 1);
	};
	useEffect( () => {
		if (supplierInfo) {
			// @ts-ignore
			const {default: QrCode} =  import('qrcode');
			setTimeout(()=>{
				QrCode?.toCanvas(canvasRef1.current, supplierInfo?.shopAddress, function (error) {
					if (error) console.error(error);
				});
			},500)

		}
	}, [canvasRef1, supplierInfo]);
	useEffect( () => {
		if (supplierInfo) {
			// @ts-ignore
			const {default: QrCode} =  import('qrcode');
			setTimeout(()=>{
				QrCode?.toCanvas(canvasRef2.current, supplierInfo?.qrCode, function (error) {
					if (error) console.error(error);
				});
			},500)

		}
	}, [canvasRef2, supplierInfo]);

	useEffect( () => {
		a()
	}, [supplierInfo]);

	const a = async () => {
		console.log(`supplierInfo=`, supplierInfo);
		if (supplierInfo) {
			const file = await getPosterImageFileNew();
			console.log(`file=`, file);
			setLoading(false);
			setPosterImgUrl(file);
		}
	}
	useEffect( () => {
		// setLoading(true);
		// const res = await ajaxService.previewPoster({
		// 	exhibitionId: row?.exhibitionId,
		// 	langBit: row?.langBit,
		// 	orderId: row?.id,
		// 	websiteCountry: row?.websiteCountry,
		// 	websiteId: row.websiteId,
		// 	ssoToken: getFromCookie(COOKIE_KEY.TOKEN_SSO),
		// });
		setSupplierInfo({
			"postUrl": "http://10.21.64.23:8085/image/0.0.80.10.0/7b2403b9f08e307d7bf388b_png.jpg",
			"shopAddress": "https://www.tradechina.com/supplier/Zhejiang-Ohminoing-home-furnishing-and-Textile-Co-Ltd11111-pneumonoultramicroscopicsi-floccinaucin_150103707004.html",
			"supplierType": 80,
			"supplierDto": {
				"id": "150103707004",
				"epsId": "PS000000000000011874",
				"name": "浙江银瑜新材料股份有限公司",
				"code": "S20004130",
				"logo": "67a4d08989c124c052f48e8_jpeg",
				"businessModel": "TradingCompany",
				"regFrom": "registr",
				"regTime": "2021-08-25 14:16:59",
				"briefInfo": "With the development of the company, in order to adapt to the conditions of the market ecocertification, QS, HACCP, FDA, BRC and other international certifications, so the company's development pace tends to be standardized and internationalized.Zhejiang Cees Food Technology Co., Ltd. is located in Hangzhou, with convenient transportation and beautiful environment. It covers an area of ​​about 80 acres and a building area of ​​about 28,000 square meters. Our company is a modern food production enterprise integrating R&D, production and sales.\r\nThe company has nearly 1,000 employees, including more than 60 workshop managers, 20 technicians, and more than 800 workshop workers. The main snack products. High-quality materials and advanced equipment and facilities to improve the quality of our products. In order to get to know our customers more, we participate in the Canton Fair and candy cocktail party every year. After the show, our sample products were favored and praised by all customers. Our products sell well in domestic and foreign markets, and are exported to the United States, Canada, Russia, the Middle East, the European Union and Australia, with annual sales of more than 1.6 billion US dollars.\r\nWith the development of the company, in order to adapt to the conditions of the market economy and according to our own development needs, we updated the equipment, hired new technical personnel, improved the process flow, and introduced modern management concepts. As a result, our company has a complete The quality management system has passed ISO9001-2008 quality management system certification, QS, HACCP, FDA, BRC and other international certifications, so the company's development pace tends to be standardized and internationalized.Zhejiang Cees Food Technology Co., Ltd. is located in Hangzhou, with convenient transportation and be",
				"advantage": "",
				"ownerName": "",
				"exportRatio": "",
				"exportRatioLl": -1,
				"exportRatioUl": -1,
				"annualSales": "1,3",
				"annualSalesLl": 1,
				"annualSalesUl": 3,
				"annualExport": "",
				"annualExportLl": -1,
				"annualExportUl": -1,
				"yearFounded": 2021,
				"meorientQual": 0,
				"adName": "Zhejiang Ohminoing home furnishing and Textile Co., Ltd11111 pneumonoultramicroscopicsi floccinaucin",
				"adImages": "4c0f0a9f1525404a94962057e46c0132,57f5212beeba43d5825a8d172d047c9c,7bfca5bdd5df40c69f78b44811654aa4,e77012e8a5d34d89b9535049c4b545be,b9746d8d65104c78ac4e2598ef0b0dcc",
				"adProducts": "",
				"adProductIds": "",
				"searchKeywords": "",
				"lastLoginTime": "2024-03-23 08:29:05",
				"state": 1,
				"approve": 2,
				"reason": "呵呵哈哈哈",
				"accessFlag": "Login",
				"qrCode": "Q29tcGFueSZTdXBwbGllciYxNTAxMDM3MDcwMDQ=",
				"dataQuality": 87,
				"star": -1,
				"isDeleted": 0,
				"categoryId": "",
				"yearsExhibitor": 0,
				"registeredAt": "22",
				"businessLicense": "f8c8e33fe84c43fb8ce6e2d95367725f,1241d1f03680438cbb91efd05054f400,dfc9c8f3a67a47e28629bf6e4bde1994",
				"stateJson": "{\"objectName\":\"com.meorient.b2b.supplier.dto.B2BSpmEntering.json.SupplierStepStateJsonDto\",\"objectVersion\":0,\"step1\":true,\"step2\":true,\"step3\":true,\"step4\":true}",
				"syncAreaSite": -1,
				"quitDigitaltradeTime": "",
				"videoId": "387702299181708511",
				"videoUrl": "",
				"password": "",
				"email": "",
				"mobile": "",
				"roleCode": "",
				"jobTitle": "",
				"lastName": "",
				"firstName": "",
				"intDialingCode": "",
				"country": "",
				"primaryAccount": {},
				"primaryContact": {
					"id": "150103707035",
					"ppsId": "PS000000000000011886",
					"code": "SC15005090",
					"lastName": "",
					"firstName": "summer aaaaaaaaaaaaaaaaaaa",
					"displayName": "summer aaaaaaaaaaaaaaaaaaa",
					"realName": "",
					"realNameVerified": false,
					"idCardType": -1,
					"idCardNo": "",
					"idCardVerified": false,
					"idCardImageIds": "",
					"nationality": "",
					"gender": -1,
					"birthday": "",
					"mobile2": "14200000000",
					"email2": "42a@qq.com",
					"remarks": "",
					"mainLangId": "2",
					"mainLang": "",
					"qrCode": "Q29udGFjdCZTdXBwbGllciYxNTAxMDM3MDcwMzU=",
					"dataQuality": 0,
					"regTime": "",
					"regFrom": "register",
					"isDeleted": -1,
					"supplierId": "150103707004",
					"roleCode": "PrimaryContact",
					"jobTitle": "",
					"supplierCode": "",
					"supplierName": "",
					"intDialingCode": "+86",
					"mobile": "14200000000",
					"email": "42a@qq.com",
					"countryId": "",
					"passportDto": {},
					"timSync": -1,
					"bindingState": 1,
					"objectVersion": 0,
					"objectName": "com.meorient.b2b.supplier.dto.SupplierContactDto"
				},
				"connectInfo": {
					"id": "150103707004",
					"countryId": "100",
					"country": "",
					"cityId": "271",
					"areaId": "500101",
					"city": "",
					"provinceId": "",
					"province": "",
					"addressCn": "",
					"addressEn": "wanzhouqu yihao",
					"postalCode": "",
					"pobox": "",
					"phone": "86-25-9622",
					"mobile": "",
					"email": "42a@qq.com",
					"fax": "0124-52101212",
					"website": "http://ZhejiangOhminohomefurnishing.com",
					"minisiteAdImage": "",
					"minisitePrefix": "",
					"whatsapp": "1093104214",
					"linkedIn": "",
					"fb": "",
					"twitter": "",
					"ins": "",
					"objectVersion": 0,
					"objectName": "com.meorient.b2b.supplier.dto.SupplierConnectInfoDto"
				},
				"abilityInfo": {
					"id": "150103707004",
					"regCapital": 1234000000,
					"majorMarket": "",
					"employees": "1001",
					"factoryArea": "1000,3000",
					"factoryLocation": "chongchongqing",
					"productionCapacity": -1,
					"productionLines": 4,
					"researchStaffs": "21,30",
					"qcStaffs": "5,10",
					"processingTrade": "1,2,3",
					"annualProductionValue": "101",
					"objectVersion": 0,
					"objectName": "com.meorient.b2b.supplier.dto.SupplierAbilityInfoDto"
				},
				"qualificationInfos": [],
				"supplierTagCodes": [],
				"targetMarket": "",
				"exportState": "",
				"csrIntentType": "jinkoushang,dailishang",
				"subAreaId": "",
				"panoramaUrl": "",
				"inquirySwitchPrompt": 0,
				"timSync": 1,
				"abroadState": 0,
				"whatsapp": "",
				"markTags": "PROD",
				"canadaFlag": -1,
				"indiaFlag": -1,
				"dubaiFlag": -1,
				"egyptFlag": -1,
				"jordanFlag": -1,
				"kazakhstanFlag": -1,
				"southAfricaFlag": -1,
				"brazilFlag": -1,
				"turkeyFlag": -1,
				"polandFlag": -1,
				"mexicoFlag": -1,
				"iranFlag": -1,
				"nigeriaFlag": -1,
				"kenyaFlag": -1,
				"indonesiaFlag": -1,
				"objectVersion": 0,
				"objectName": "com.meorient.b2b.supplier.dto.SupplierDto"
			},
			"standNos": [
				"A11223344,A44332211"
			],
			"spuDtos": [
				{
					"id": "24101857",
					"sellerId": "150103707004",
					"sellerName": "浙江银瑜新材料股份有限公司",
					"categoryId1": "44",
					"categoryId2": "100005069",
					"categoryId3": "2212",
					"categoryId4": "",
					"name": "test made by _yunyinghoutai",
					"mainImageId": "3bc44c8adf510780d76f37a_jpeg",
					"searchKeywords": "",
					"onsaleTime": "2024-01-24 13:58:29",
					"onsaleState": 1,
					"goodsState": 1,
					"modifiedTime": "2024-01-24 13:58:39",
					"createdTime": "2024-01-10 13:52:19",
					"dataQuality": 71,
					"unitOfMeasure": "piece",
					"volume": 43,
					"unitPrice": 5500,
					"autoOnself": 1,
					"qrCode": "R29vZHMmUExBVEZPUk0mMjQxMDE4NTc=",
					"deleted": 0,
					"sort": 86,
					"paymentType": "",
					"addWatermark": 1,
					"addWindow": 0,
					"showQuote": 1,
					"logisticsInfo": {},
					"imageIds": "",
					"imageDesc": "",
					"imageShow": "",
					"content": "",
					"goodsSellerCategory": "",
					"goodsSpuMCategoryDtos": [],
					"categoryName": "Consumer Electronics > Electronic Publications > Music",
					"goodsSpecDtos": [],
					"isExhibit": false,
					"enquireNum": -1,
					"viewNum": -1,
					"goodsSpuPriceDtoList": [],
					"maxPrice": -1,
					"maxVolume": -1,
					"goodsSpuAttrValueList": [],
					"categoryId1Name": "",
					"categoryId2Name": "",
					"categoryId3Name": "",
					"categoryId4Name": "",
					"order": -1,
					"videoId": "",
					"videoUrl1": "",
					"videoUrl2": "",
					"tagSource": 1,
					"businessTagCode": "",
					"hasAbroadStore": 0,
					"abroadPrice": 0,
					"foreignTradeSync": -1,
					"syncFailReason": "",
					"syncTradeTime": "",
					"createdBy": "000001",
					"modifiedBy": "150103707004",
					"goodsRetailPrice": "",
					"isSub": false,
					"sourceType": 1,
					"aliSupplierImportId": "",
					"seoOnsaleState": 2,
					"publishSeo": 0,
					"originGoodsId": "",
					"originGoodsUrl": "",
					"publishWzm": 1,
					"seoSort": -1,
					"seoOnsaleTime": "",
					"jztWebsiteIds": "",
					"exhibit": false,
					"imageIdsList": [],
					"imageShowList": [],
					"imageDescList": [],
					"paymentTypeList": [],
					"objectVersion": 0,
					"objectName": "com.meorient.b2b.goods.service.dto.GoodsSpuDto"
				},
				{
					"id": "24101736",
					"sellerId": "150103707004",
					"sellerName": "浙江银瑜新材料股份有限公司",
					"categoryId1": "3",
					"categoryId2": "127734177",
					"categoryId3": "340",
					"categoryId4": "",
					"name": "dsfdsgsdgsdgdsfdsgsdgsdgdsfdsgsdgsdgdsfdsgsdgsdgdsfdsgsdgsdgdsfdsgsdgsdg",
					"mainImageId": "ef341b180e33867a24a17bf_png",
					"searchKeywords": "",
					"onsaleTime": "2024-01-24 13:58:44",
					"onsaleState": 1,
					"goodsState": 1,
					"modifiedTime": "2024-01-24 13:58:54",
					"createdTime": "2023-10-30 14:36:54",
					"dataQuality": 72,
					"unitOfMeasure": "piece",
					"volume": 11,
					"unitPrice": 2200,
					"autoOnself": 1,
					"qrCode": "R29vZHMmUExBVEZPUk0mMjQxMDE3MzY=",
					"deleted": 0,
					"sort": 77,
					"paymentType": "",
					"addWatermark": 1,
					"addWindow": 0,
					"showQuote": 1,
					"logisticsInfo": {},
					"imageIds": "",
					"imageDesc": "",
					"imageShow": "",
					"content": "",
					"goodsSellerCategory": "",
					"goodsSpuMCategoryDtos": [],
					"categoryName": "Apparel > Active sportswear > Swimwear & Beachwear",
					"goodsSpecDtos": [],
					"isExhibit": false,
					"enquireNum": -1,
					"viewNum": -1,
					"goodsSpuPriceDtoList": [],
					"maxPrice": -1,
					"maxVolume": -1,
					"goodsSpuAttrValueList": [],
					"categoryId1Name": "",
					"categoryId2Name": "",
					"categoryId3Name": "",
					"categoryId4Name": "",
					"order": -1,
					"videoId": "",
					"videoUrl1": "",
					"videoUrl2": "",
					"tagSource": 1,
					"businessTagCode": " ",
					"hasAbroadStore": 0,
					"abroadPrice": 0,
					"foreignTradeSync": -1,
					"syncFailReason": "",
					"syncTradeTime": "",
					"createdBy": "150103707035",
					"modifiedBy": "150103707004",
					"goodsRetailPrice": "",
					"isSub": false,
					"sourceType": 1,
					"aliSupplierImportId": "",
					"seoOnsaleState": 2,
					"publishSeo": 0,
					"originGoodsId": "",
					"originGoodsUrl": "",
					"publishWzm": 1,
					"seoSort": -1,
					"seoOnsaleTime": "",
					"jztWebsiteIds": "",
					"exhibit": false,
					"imageIdsList": [],
					"imageShowList": [],
					"imageDescList": [],
					"paymentTypeList": [],
					"objectVersion": 0,
					"objectName": "com.meorient.b2b.goods.service.dto.GoodsSpuDto"
				},
				{
					"id": "24099299",
					"sellerId": "150103707004",
					"sellerName": "浙江银瑜新材料股份有限公司",
					"categoryId1": "16544",
					"categoryId2": "10001",
					"categoryId3": "",
					"categoryId4": "",
					"name": "full furniture ornament",
					"mainImageId": "8e3e94ba379142e68f4e092d45047904",
					"searchKeywords": "full,furniture",
					"onsaleTime": "2024-01-24 13:58:52",
					"onsaleState": 1,
					"goodsState": 1,
					"modifiedTime": "2024-01-24 13:59:04",
					"createdTime": "2021-12-23 11:34:30",
					"dataQuality": 71,
					"unitOfMeasure": "piece",
					"volume": 10,
					"unitPrice": 5000,
					"autoOnself": 1,
					"qrCode": "R29vZHMmUExBVEZPUk0mMjQwOTkyOTk=",
					"deleted": 0,
					"sort": 24,
					"paymentType": "L/C,D/A,D/P,T/T,Western Union,Money Gram,Other",
					"addWatermark": 1,
					"addWindow": 0,
					"showQuote": 1,
					"logisticsInfo": {},
					"imageIds": "",
					"imageDesc": "",
					"imageShow": "",
					"content": "",
					"goodsSellerCategory": "",
					"goodsSpuMCategoryDtos": [],
					"categoryName": "Other > bbbb",
					"goodsSpecDtos": [],
					"isExhibit": false,
					"enquireNum": -1,
					"viewNum": -1,
					"goodsSpuPriceDtoList": [],
					"maxPrice": -1,
					"maxVolume": -1,
					"goodsSpuAttrValueList": [],
					"categoryId1Name": "",
					"categoryId2Name": "",
					"categoryId3Name": "",
					"categoryId4Name": "",
					"order": -1,
					"videoId": "387702293353969721",
					"videoUrl1": "http://10.21.64.23:8085/image/getDocumentUrl/387702293353969721",
					"videoUrl2": "http://10.21.64.23:8085/image/getDocumentUrl/387702293353969721",
					"tagSource": 1,
					"businessTagCode": " ",
					"hasAbroadStore": 0,
					"abroadPrice": 0,
					"foreignTradeSync": -1,
					"syncFailReason": "",
					"syncTradeTime": "",
					"createdBy": "150103707035",
					"modifiedBy": "150103707004",
					"goodsRetailPrice": "12",
					"isSub": false,
					"sourceType": 1,
					"aliSupplierImportId": "",
					"seoOnsaleState": 1,
					"publishSeo": 1,
					"originGoodsId": "",
					"originGoodsUrl": "",
					"publishWzm": 1,
					"seoSort": 8,
					"seoOnsaleTime": "2022-07-29 09:48:07",
					"jztWebsiteIds": "438,482,487",
					"exhibit": false,
					"imageIdsList": [],
					"imageShowList": [],
					"imageDescList": [],
					"paymentTypeList": [
						"L/C",
						"D/A",
						"D/P",
						"T/T",
						"Western Union",
						"Money Gram",
						"Other"
					],
					"objectVersion": 0,
					"objectName": "com.meorient.b2b.goods.service.dto.GoodsSpuDto"
				},
				{
					"id": "24099848",
					"sellerId": "150103707004",
					"sellerName": "浙江银瑜新材料股份有限公司",
					"categoryId1": "28",
					"categoryId2": "2804",
					"categoryId3": "",
					"categoryId4": "",
					"name": "Korean Used Good Quality Transfer",
					"mainImageId": "",
					"searchKeywords": "Korean",
					"onsaleTime": "2024-01-24 13:58:56",
					"onsaleState": 1,
					"goodsState": 1,
					"modifiedTime": "2024-01-24 13:59:14",
					"createdTime": "2022-05-09 15:22:11",
					"dataQuality": 43,
					"unitOfMeasure": "bag",
					"volume": 1,
					"unitPrice": 2000,
					"autoOnself": 1,
					"qrCode": "R29vZHMmUExBVEZPUk0mMjQwOTk4NDg=",
					"deleted": 0,
					"sort": 44,
					"paymentType": "",
					"addWatermark": 1,
					"addWindow": 0,
					"showQuote": 1,
					"logisticsInfo": {},
					"imageIds": "",
					"imageDesc": "",
					"imageShow": "",
					"content": "",
					"goodsSellerCategory": "",
					"goodsSpuMCategoryDtos": [],
					"categoryName": "Business Services > Assurance Services",
					"goodsSpecDtos": [],
					"isExhibit": false,
					"enquireNum": -1,
					"viewNum": -1,
					"goodsSpuPriceDtoList": [],
					"maxPrice": -1,
					"maxVolume": -1,
					"goodsSpuAttrValueList": [],
					"categoryId1Name": "",
					"categoryId2Name": "",
					"categoryId3Name": "",
					"categoryId4Name": "",
					"order": -1,
					"videoId": "",
					"videoUrl1": "",
					"videoUrl2": "",
					"tagSource": 1,
					"businessTagCode": " ",
					"hasAbroadStore": 0,
					"abroadPrice": 0,
					"foreignTradeSync": -1,
					"syncFailReason": "",
					"syncTradeTime": "",
					"createdBy": "150103707035",
					"modifiedBy": "150103707004",
					"goodsRetailPrice": "",
					"isSub": false,
					"sourceType": 1,
					"aliSupplierImportId": "",
					"seoOnsaleState": 1,
					"publishSeo": 1,
					"originGoodsId": "",
					"originGoodsUrl": "",
					"publishWzm": 1,
					"seoSort": 33,
					"seoOnsaleTime": "2022-06-15 14:06:50",
					"jztWebsiteIds": "482",
					"exhibit": false,
					"imageIdsList": [],
					"imageShowList": [],
					"imageDescList": [],
					"paymentTypeList": [],
					"objectVersion": 0,
					"objectName": "com.meorient.b2b.goods.service.dto.GoodsSpuDto"
				}
			],
			"qrCode": "http://testcity.tradechina.com/global/expoUnitedStatesofAmerica_150141646932/preRegister?meo_id=S20004130",
			"exhibitionState": 1,
			"postType": 2,
			"prodIds": "",
			"exhibitionName": "gengbao  USA",
			"inshowStartDate": "20240229",
			"inshowEndDate": "20240302",
			"cityName": "Karamay",
			"countryName": "United States of America",
			"location": ""
		});

	}, []);
	return (
		<div className={"container"}>
			{/*<Spin className={clazz.loading} spinning={loading}>*/}
				<div className={"box"}>
					{/*<canvas id="wheel"  ref={wheel}></canvas>*/}
					<div className={"qrCode"}>
						<canvas ref={canvasRef1} />
						<canvas ref={canvasRef2} />
					</div>
					<div className={"imgBox"}>
						<img src={posterImgUrl} id="poster-img" className={"posterBg"} />
					</div>
				</div>
			{/*</Spin>*/}
			{/*<div className={clazz.info}>*/}
			{/*	<div className={clazz.title}>为达到海报最佳视觉效果，海报配置这块我们建议您按以下提示进行操作:</div>*/}
			{/*	<br />*/}
			{/*	1.背景banner您可以选择自行上传或者使用平台提供的默认图片。如选择自选上传，建议您上传的背景图*/}
			{/*	<br />*/}
			{/*	<br />*/}
			{/*	满足以下条件：*/}
			{/*	<br />*/}
			{/*	①尺寸为：750*1200像素*/}
			{/*	<br />*/}
			{/*	②图片主体在右侧*/}
			{/*	<br />*/}
			{/*	③背景颜色偏浅色*/}
			{/*	<br />*/}
			{/*	<br />*/}
			{/*	2.产品图片部分建议您上传至少4个产品，如果产品比较多您可以通过“产品管理”进行调整*/}
			{/*	<br />*/}
			{/*	<br />*/}
			{/*	3.为避免出现客户不会使用扫码功能而无法报名的情况，建议您同时发送海报+展会报名链接至客户*/}
			{/*	<div className={clazz.buttonBox}>*/}
			{/*		<Button*/}
			{/*			type="primary"*/}
			{/*			className={clazz.downButton}*/}
			{/*			onClick={() => {*/}
			{/*				downloadBadge(posterImgUrl, `${'海报'}.png`);*/}
			{/*			}}*/}
			{/*		>*/}
			{/*			下载海报*/}
			{/*		</Button>*/}
			{/*		{!loading && supplierInfo?.exhibitionState != 5 && supplierInfo?.exhibitionState != 4 ? (*/}
			{/*			<Button*/}
			{/*				className={clazz.copyButton}*/}
			{/*				onClick={() => {*/}
			{/*					copyMsg(supplierInfo?.qrCode);*/}
			{/*					message.success('复制成功！');*/}
			{/*				}}*/}
			{/*			>*/}
			{/*				复制展会报名链接*/}
			{/*			</Button>*/}
			{/*		) : null}*/}
			{/*	</div>*/}
			{/*</div>*/}
		</div>
	);
};

export default Poster;
